<template>
  <a-modal v-model:open="visible" title="收款/凭据" @cancel="onCancel" width="900px" :footer="null">
    <a-form :model="form" layout="horizontal" :label-col="labelCol" >
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="交易日期" required>
            <a-date-picker v-model:value="form.tradeDate" style="width: 100%;" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="流水号" required>
            <a-input v-model:value="form.serialNo" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="收支方向" required>
            <a-radio-group v-model:value="form.direction">
              <a-radio value="in">收入</a-radio>
              <a-radio value="out">支出</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="账户名称">
            <a-input v-model:value="form.accountName" />
          </a-form-item>
        </a-col>
     
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="现金银行科目">
            <a-input v-model:value="form.bankSubject" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="辅助项目">
            <a-input v-model:value="form.assistItem" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="摘要">
            <a-input v-model:value="form.summary" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="收支类型">
            <a-input v-model:value="form.summary" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="对方会计科目">
            <a-input v-model:value="form.oppositeSubject" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="辅助项目">
            <a-input v-model:value="form.oppositeAssistItem" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="收入金额(本币)">
            <a-input v-model:value="form.incomeAmount" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="支出金额(本币)">
            <a-input v-model:value="form.expenseAmount" />
          </a-form-item>
        </a-col>
      
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="外币金额">
            <a-input v-model:value="form.foreignAmount" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="汇率">
            <a-input v-model:value="form.exchangeRate" />
          </a-form-item>
        </a-col>
      
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="对方户名">
            <a-input v-model:value="form.oppositeAccount" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="对方账号">
            <a-input v-model:value="form.oppositeAccount" />
          </a-form-item>
        </a-col>

      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="结算方式">
            <a-input v-model:value="form.applyType" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="票据号">
            <a-input v-model:value="form.ticketNo" />
          </a-form-item>
        </a-col>

      </a-row>
      <a-row :gutter="16">
      
        <a-col :span="24">
          <a-form-item label="备注">
            <a-input v-model:value="form.remark" />
          </a-form-item>
        </a-col>
      </a-row>
      <div style="text-align: center; margin-top: 16px;">
        <a-button type="primary" style="margin-right: 16px;" @click="onSaveAndAdd">保存并新增</a-button>
        <a-button type="primary" style="margin-right: 16px;" @click="onSave">保存</a-button>
        <a-button @click="onCancel">取消</a-button>
      </div>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, reactive } from 'vue';
const visible = ref(false);
const form = reactive({
  tradeDate: '',
  serialNo: '',
  direction: 'in',
  accountName: '',
  bankSubject: '',
  assistItem: '',
  summary: '',
  oppositeSubject: '',
  oppositeAssistItem: '',
  incomeAmount: '',
  expenseAmount: '',
  foreignAmount: '',
  exchangeRate: '',
  oppositeAccount: '',
  applyType: '',
  ticketNo: '',
  remark: '',
});

const labelCol = { style: { width: '120px' } };

function showModal(data) {
  visible.value = true;
  if (data) {
    Object.assign(form, data);
  } else {
    Object.keys(form).forEach(k => form[k] = '');
    form.direction = 'in';
  }
}
function onSaveAndAdd() {
  // TODO: 保存并新增逻辑
  visible.value = false;
}
function onSave() {
  // TODO: 保存逻辑
  visible.value = false;
}
function onCancel() {
  visible.value = false;
}
defineExpose({ showModal });
</script>

<style scoped>
:deep(.ant-modal-content) {
  padding-bottom: 0;
}
</style> 